<template>
  <div style="height:100vh;background: #e8e8e8;">
    <div class="title">我有想法</div>
    <van-form
    id="detail"
      @submit="onSubmit"
      style="background: rgb(232, 232, 232);"
    >
      <van-field
        v-if="num != 2"
        v-model="type"
        name="类型"
        :disabled="true"
        label="类型"
        placeholder="类型"
        :rules="[{ required: true, message: '请填写类型' }]"
      />
      <van-field
        v-if="num==2"
        readonly
        clickable
        :disabled="disabled"
        name="picker"
        :value="type.name"
        label="建议类型"
        @blur="onBlur"
        placeholder="建议类型"
        @click="showType = true"
      />
      <van-popup
        v-model="showType"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="suggestList"
          value-key="name"
          @confirm="onConfirmSuggest"
          @cancel="showType = false"
        />
      </van-popup>
      <van-field
        name="switch"
        label="匿名"
      >
        <!-- <template #input> -->
        <van-switch
          slot="input"
          v-model="isAnonymous"
          size="20"
          :disabled="disabled"
        />
        <!-- </template> -->
      </van-field>
      <van-field
        v-model="userName"
        name="姓名"
        v-if="!isAnonymous"
        :disabled="true"
        :label="ifJb+'姓名'"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="userName"
        name="姓名"
        v-if="isAnonymous"
        type="password"
        :disabled="true"
        :label="ifJb+'姓名'"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="mobile"
        type="tel"
        label="联系方式"
        placeholder="联系方式"
        :rules="[{ required: true, message: '请填写联系方式' }]"
      />
      <!-- <van-field
        v-model="mobile"
        type="password"
        :disabled="true"
        v-if="isAnonymous"
        label="联系方式"
        placeholder="联系方式"
        :rules="[{ required: true, message: '请填写联系方式' }]"
      /> -->
       <!-- <van-field
        v-model="posi.name"
        type="password"
        :disabled="true"
        v-if="disabled && num != 4"
        label="事件属地"
        placeholder="事件属地"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="posi.name"
        label="事件属地"
        @blur="onBlur"
        v-if="num != 4 && !disabled"
        placeholder="事件属地"
        @click="showPicker = true"
      />
      <van-popup
        v-model="showPicker"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="areas"
          value-key="name"
          @confirm="onConfirmArea"
          @cancel="showPicker = false"
        />
      </van-popup>
      -->
      <van-field
        v-if="num == 4"
        v-model="informerInfo"
        :disabled="disabled"
        label="被举报人姓名以及部门"
        @blur="onBlur"
        placeholder="被举报人姓名以及部门"
      />
        <van-field
        v-model="bm.name"
        type="password"
        :disabled="true"
        v-if="disabled && num != 4"
        :label="bmType+'部门'"
         :placeholder="bmType+'部门'"
      />
      <van-field
        readonly
        v-if="num != 4 && !disabled"
        clickable
        name="picker"
        :value="bm.name"
        :label="bmType+'部门'"
        @blur="onBlur"
        :placeholder="bmType+'部门'"
        @click="showBm = true"
      />

      <van-popup
        v-model="showBm"
        position="bottom"
      >
        <van-picker
          show-toolbar
          :columns="bms"
          value-key="name"
          @confirm="onConfirmBm"
          @cancel="showBm = false"
        />
      </van-popup>
      <!-- <van-field
        v-model="fileNo"
        :disabled="disabled"
        v-if="type.id == 2"
        @blur="onBlur"
        autosize
        label="文件制度编号"
        placeholder="文件制度编号"
        show-word-limit
      /> -->
      <van-field
        v-model="fileName"
        v-if="type.id == 2"
        @blur="onBlur"
        :disabled="disabled"
        autosize
        label="制度文号及名称"
        placeholder="制度文号及名称"
        show-word-limit
      />
      <van-field
        v-model="title"
        v-if="num != 4"
        rows="2"
        @blur="onBlur"
        autosize
        :disabled="disabled"
        label="标题"
        type="textarea"
        maxlength="50"
        placeholder="标题"
        show-word-limit
      />
      <van-field
        v-model="content"
        rows="4"
        autosize
        label="内容"
        :disabled="disabled"
        @blur="onBlur"
        type="textarea"
        maxlength="500"
        placeholder="内容"
        show-word-limit
      />
      <div style="margin: 16px;" v-if="!disabled">
        <van-button
          round
          block
          type="info"
          native-type="submit"
        >提交</van-button>
      </div>
    </van-form>

  </div>

</template>
<script>
import { Notify } from 'vant'
import { axios } from '@/utils/request'

export default {
  data() {
    return {
      num: this.$route.query.type ? this.$route.query.type : '',
      userName: this.$route.query.userName ? this.$route.query.userName : '',
      mobile: this.$route.query.mobile ? this.$route.query.mobile : '',
      id: this.$route.query.id ? this.$route.query.id : '',
      type: '',
      isAnonymous: false,
      bms: [],
      title: '',
      content: '',
      showPicker: false,
      showBm: false,
      newType: '',
      showType: false,
      bmType: '',
      selectType: '',
      disabled: false,
      ifJb: '',
      informerInfo: '',
      suggestList: [
        { id: 2, name: '规章制度建议' },
        { id: 3, name: '其他建议' }
      ],
      posi: {},
      area: '',
      areas: [],
      bm: {},
      fileName: '',
      fileNo: '',
      deparmentId: '',
      deparmentName: ''
    }
  },
  computed: {
    linkId() {
      return localStorage.getItem('linkId')
    }
  },
  created: function () {
    document.title = '员工反馈'
    this.changeType()
    if (this.id) {
      this.getDetail()
      this.disabled = true
    }
    setInterval(this.getTime, 500)
  },
  mounted() {
    this.loadData()
    this.loadArea()
  },
  methods: {
    changeType() {
      if (this.num == 1) {
        this.type = '咨询'
        this.bmType = '咨询'
      } else if (this.num == 2) {
        this.bmType = '建议'
      } else if (this.num == 3) {
        this.type = '投诉'
        this.bmType = '投诉'
      } else {
        this.type = '举报'
        this.ifJb = '举报人'
      }
    },
    onBlur() {
      window.scroll(0, 0)
    },
    onConfirmBm(value) {
      this.bm = value
      this.deparmentId = value.id
      this.deparmentName = value.name
      this.showBm = false
    },
    onConfirmArea(value) {
      this.posi = value
      this.showPicker = false
      this.area = value.id
    },
    onConfirmSuggest(value) {
      this.type = value
      this.showType = false
    },
    onSubmit(values) {
      if (this.type == '咨询') {
        this.newType = 1
      } else if (this.type == '举报') {
        this.newType = 6
      } else if (this.type == '投诉') {
        this.newType = 5
      }else {
        this.newType = this.type.id
      }
       if (!this.type) {
        this.$toast('请选择建议类型')
      } 
      // else if (this.num != 4 && !this.area) {
      //   this.$toast('请选择事件属地')
      // } 
      else if (this.num == 4 && !this.informerInfo) {
        this.$toast('请填写被举报人姓名以及部门')
      } else if (this.num != 4 && !this.deparmentId) {
        this.$toast('请选择'+this.bmType+'部门')
      } 
      // else if (this.type.id == 2 && !this.fileNo) {
      //   this.$toast('请输入文件制度编号')
      // }
       else if (this.type.id == 2 && !this.fileName) {
        this.$toast('请输入文件制度名称')
      } else if (this.num != 4 && !this.title) {
        this.$toast('请输入标题')
      } else if (!this.content) {
        this.$toast('请输入内容')
      } else{
         const params = {
        linkId: this.linkId,
        type: this.newType,
        isAnonymous: values.switch ? 1 : 0,
        userName: this.userName,
        mobile: this.mobile,
        fileNo: this.fileNo,
        fileName: this.fileName,
        aera: this.area,
        deparmentId: this.deparmentId,
        deparmentName: this.deparmentName,
        content: this.content,
        title: this.title,
        informerInfo: this.informerInfo,
        informerCode: this.informerCode,
      }
      if (this.id) {
        params.id = this.id
      }
      const api = this.id ? '/api/gateway/basemgt-feedback/feedback/update' : '/api/gateway/basemgt-feedback/feedback/save'
      this.$http({
        url: api,
        method: 'post',
        data: params
      }).then(data => {
        if (data.code == 200) {
          Notify({ type: 'success', message: '提交成功！' })
          this.$router.go(-1)
        } else {
          Notify({ type: 'warning', message: data.msg })
        }
      })
      }
     
    },
    getDetail() {
      const params = {
        id: this.id
      }
      try {
        this.$http({
          url: '/api/gateway/basemgt-feedback/feedback/getFeedbackReplyDetail',
          method: 'get',
          params: params
        }).then(res => {
          if (res.code == 200) {
            this.typenum = res.data.type
            this.num = res.data.type
            this.$nextTick(() => {
              if (this.typenum == 1) {
                this.type = '咨询'
                this.bmType = '咨询'
              } else if (this.typenum == 2) {
                this.bmType = '建议'
                this.showType = false
                this.type = { id: 2, name: '规章制度建议' }
              } else if (this.typenum == 3) {
                this.bmType = '建议'
                this.showType = false
                this.num = 2
                this.type = { id: 3, name: '其他建议' }
              } else if (this.typenum == 5) {
                this.bmType = '投诉'
                this.num = 3
                this.type = '投诉'
              } else {
                this.num = 4
                this.type = '举报'
                this.ifJb = '举报人'
              }
            })

            this.userName = res.data.userName
            this.mobile = res.data.mobile
            this.fileNo = res.data.fileNo
            this.fileName = res.data.fileName
            this.isAnonymous = res.data.isAnonymous == 0 ? false : true
            this.areas.map(item => {
              if ((item.id = res.data.aera)) {
                this.posi = item
              }
            })
            this.area = res.data.aera
            this.deparmentId = res.data.deparmentId
            this.deparmentName = res.data.deparmentName
            this.bm = {
              id: this.deparmentId,
              name: this.deparmentName
            }
            this.content = res.data.content
            this.title = res.data.title
            this.informerInfo = res.data.informerInfo
            this.informerCode = res.data.informerCode
          } else {
            Notify({ type: 'warning', message: data.msg })
          }
        })
      } catch (error) {
      } finally {
        this.loading = false
      }
    },
    loadData() {
      this.$http({
        url: '/api/gateway/basemgt-feedback/feedback/getDept',
        method: 'get'
      }).then(data => {
        if (data.code == 200) {
          this.bms = data.data
        } else {
          Notify({ type: 'warning', message: data.msg })
        }
      })
    },
    loadArea() {
      this.$http({
        url: '/api/gateway/basemgt-feedback/feedback/getArea',
        method: 'get'
      }).then(data => {
        if (data.code == 200) {
          this.areas = data.data
        } else {
          Notify({ type: 'warning', message: data.msg })
        }
      })
    }
  }
}
</script>
<style scoped>
.title {
  text-align: center;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
}
.upload::after {
  content: '*填写说明：ID需露出';
  color: red;
  font-size: 12px;
}
.info::after {
  content: '*填写说明：售卖品牌、货季、折扣等';
  color: red;
  font-size: 12px;
}
</style>
<style>
#detail .van-field--disabled .van-field__label{
  color: #646566;
}
</style>